<template>
  <div class="sex-container">
    <div class="cex-container-title">
      <p>男女比例</p>
      <img src="@/assets/images_screen/dataScreen-title.png" alt="">
    </div>
    <div class="sex-container-people">
      <div class="people-man">
        <img src="@/assets/images_screen/man.png" alt="">
      </div>
      <div class="people-woman">
        <img src="@/assets/images_screen/woman.png" alt="">
      </div>
    </div>
    <div class="sex-container-rate">
      <p>男士58%</p>
      <p>女士42%</p>
    </div>
    <div class="sex-container-charts" ref="chartsDom"></div>
  </div>
</template>

<script setup lang="ts">
import * as echarts from "echarts";
import { onMounted, ref } from "vue";

//dom节点
let chartsDom = ref();

//生命周期
onMounted(()=>{
  //获取echarts类的实例,初始化
  let mycharts = echarts.init(chartsDom.value);
  //设置实例的配置项
  mycharts.setOption({
    title:{
      // text:"水球图"
    },
    xAxis:{
      show:false,
      min:0,
      max:100
    },
    yAxis:{
      show:false,
      type:"category"
    },
    series:[
      {
        type:'bar',
        data:[58],
        barWidth:20,
        z:9,
        itemStyle:{
          color:'yellow',
          borderRadius:20,
        }
      },
      {
        type:"bar",
        data:[100],
        barWidth:20,
        //调整柱条位置
        barGap:"-100%",
        itemStyle:{
          color:'blue',
          borderRadius:20
        }
      }
    ],
    //布局
    gird:{
      left:0,
      right:0,
      top:0,
      bottom:0
    }
  })
})
</script>
<script lang="ts">
export default {
    name:"Sex"
}
</script>

<style scoped>
.sex-container{
  width: 100%;
  height: 100%;
  background: url("@/assets/images_screen/dataScreen-main-lb.png") no-repeat;
  background-size: 100% 100%;
  margin: 10px 0;
}

.sex-container .cex-container-title{
  margin-left: 20px;
}
.sex-container .cex-container-title p{
  color:white;
  font-size: 20px;
}

.sex-container-people{
  display: flex;
  justify-content: center;
  align-items: center;
}
.sex-container-people .people-man{
  margin:30px;
  width: 111px;
  height: 115px;
  background: url("@/assets/images_screen/man-bg.png") no-repeat;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
}
.sex-container-people .people-woman{
  margin:30px;
  width: 111px;
  height: 115px;
  background: url("@/assets/images_screen/woman-bg.png") no-repeat;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
}

.sex-container-rate{
  display: flex;
  padding: 0 80px;
  justify-content: space-between;
  color: white;
}

.sex-container-charts{
  height: 100px;
}
</style>